<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<style>
			html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
	</head>

	<body>

		<ul id="parent" class="mui-table-view mui-table-view-striped mui-table-view-condensed" style="margin-top: 1px;">
				<!--<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="product-cell mui-table">
							<div class="product-img mui-table-cell">
								<img src="../../image/product1.jpg" style="width: 60px; height: 60px;"/>
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix name" style="min-height: 31px; max-height: 41px;">
									<span class="">悠悠飘香奶茶</span>
								</div>
								<p class="mui-h6">
									<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ 5.00</span>
								</p>
								<p class="desc"><span>西安今生缘有限公司</span></p>
							</div>
						</div>
					</div>
				</li>

				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="product-cell mui-table">
							<div class="product-img mui-table-cell">
								<img src="../../image/product2.jpg" style="width: 60px; height: 60px;"/>
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix name" style="min-height: 31px; max-height: 41px;">
									<span class="">可口营养早餐面包</span>
								</div>
								<p class="mui-h6">
									<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ 6.00</span>
								</p>
								<p class="desc"><span>西安今生缘有限公司</span></p>
							</div>
						</div>
					</div>
				</li>

				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="product-cell mui-table">
							<div class="product-img mui-table-cell">
								<img src="../../image/product3.jpg" style="width: 60px; height: 60px;"/>
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix name" style="min-height: 31px; max-height: 41px;">
									<span class="">哈尔滨啤酒！一起来哈皮！</span>
								</div>
								<p class="mui-h6">
									<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ 6.00</span>
								</p>
								<p class="desc"><span>西安今生缘有限公司</span></p>
							</div>
						</div>
					</div>
				</li>

				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="product-cell mui-table">
							<div class="product-img mui-table-cell">
								<img src="../../image/product4.jpg" style="width: 60px; height: 60px;"/>
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix name" style="min-height: 31px; max-height: 41px;">
									<span class="">浓香咖啡</span>
								</div>
								<p class="mui-h6">
									<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ 15.00</span>
								</p>
								<p class="desc"><span>西安今生缘有限公司</span></p>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="product-cell mui-table">
							<div class="product-img mui-table-cell">
								<img src="../../image/product1.jpg" style="width: 60px; height: 60px;"/>
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix name" style="min-height: 31px; max-height: 41px;">
									<span class="">悠悠飘香奶茶</span>
								</div>
								<p class="mui-h6">
									<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ 5.00</span>
								</p>
								<p class="desc"><span>西安今生缘有限公司</span></p>
							</div>
						</div>
					</div>
				</li>

				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="product-cell mui-table">
							<div class="product-img mui-table-cell">
								<img src="../../image/product2.jpg" style="width: 60px; height: 60px;"/>
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix name" style="min-height: 31px; max-height: 41px;">
									<span class="">可口营养早餐面包</span>
								</div>
								<p class="mui-h6">
									<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ 6.00</span>
								</p>
								<p class="desc"><span>西安今生缘有限公司</span></p>
							</div>
						</div>
					</div>
				</li>

				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="product-cell mui-table">
							<div class="product-img mui-table-cell">
								<img src="../../image/product3.jpg" style="width: 60px; height: 60px;"/>
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix name" style="min-height: 31px; max-height: 41px;">
									<span class="">哈尔滨啤酒！一起来哈皮！</span>
								</div>
								<p class="mui-h6">
									<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ 6.00</span>
								</p>
								<p class="desc"><span>西安今生缘有限公司</span></p>
							</div>
						</div>
					</div>
				</li>

				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="product-cell mui-table">
							<div class="product-img mui-table-cell">
								<img src="../../image/product4.jpg" style="width: 60px; height: 60px;"/>
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix name" style="min-height: 31px; max-height: 41px;">
									<span class="">浓香咖啡</span>
								</div>
								<p class="mui-h6">
									<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ 15.00</span>
								</p>
								<p class="desc"><span>西安今生缘有限公司</span></p>
							</div>
						</div>
					</div>
				</li>-->

			</ul>
		

		

		
	</body>

	<script src="../../js/mui.min.js"></script>
	<script src="../../js/template.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/_API.js"></script>
	<script id="tmpl" type="text/html">
		{{each datas as value i}}
			<li class="mui-table-view-cell">
	        	<a class="mui-navigate-right" data-window="{{value.id}}">
					<div class="mui-slider-cell">
						<div class="product-cell mui-table">
							<div class="product-img mui-table-cell">
								<img src="../../image/product{{value.id}}.jpg" style="width: 60px; height: 60px;"/>
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix name" style="min-height: 31px; max-height: 41px;">
									<span class="">{{value.name}}</span>
								</div>
								<p class="mui-h6">
									<span class="mui-badge mui-badge-danger mui-badge-inverted">￥ {{value.price}}</span>
								</p>
								<p class="desc"><span>{{value.company}}</span></p>
							</div>
						</div>
					</div>
	        	</a>
			</li>

        {{/each}}

	</script>
	
	<script>
		mui.init({
		  preloadPages:[{
		    id:'productDetail.html',
		    url:'productDetail.html',
		    styles: {
				top: 0,
				bottom: 0,
				zindex: 99999
			},
		  }]
		});
		
		var detailPage = null;
		mui('#parent').on('tap', '[data-window]', function() {
			var id = this.getAttribute('data-window');
			
			if(!detailPage){
				detailPage = plus.webview.getWebviewById('productDetail.html');
			}
			//触发详情页面的newsId事件
			mui.fire(detailPage, 'changeId', {
				id:id
			});
			//打开详情页面          
			mui.openWindow({
				id:'productDetail.html',
				extras:{
					product_id:id
				}
			});
		});
		
		var json = {
			datas:[
			{
				name:"悠悠飘香奶茶",
				price:5.88,
				id:1,
				company:"西安今生缘有限公司"
			},
			{
				name:"可口营养早餐面包",
				price:6.88,
				id:2,
				company:"西安今生缘有限公司"
			},
			{
				name:"哈尔滨啤酒！一起来哈皮！",
				price:8.00,
				id:3,
				company:"西安今生缘有限公司"
			},
			{
				id:4,
				name:"浓香咖啡",
				price:15.80,
				company:"西安今生缘有限公司"
			},
			{
				name:"悠悠飘香奶茶",
				price:5.88,
				id:1,
				company:"西安今生缘有限公司"
			},
			{
				name:"可口营养早餐面包",
				price:6.88,
				id:2,
				company:"西安今生缘有限公司"
			},
			{
				name:"哈尔滨啤酒！一起来哈皮！",
				price:8.00,
				id:3,
				company:"西安今生缘有限公司"
			},
			{
				id:4,
				name:"浓香咖啡",
				price:15.80,
				company:"西安今生缘有限公司"
			}
		]
		}
    	var html = template('tmpl', json);
		document.getElementById('parent').innerHTML = html;
		/**mui.plusReady(function(){
			_API.ajax2('products/page', {}, true)
			.success(function(json){

			}).error(function(json){
	        	plus.nativeUI.toast(json.msgInfo);
			});
		});*/
	</script>

</html>